<template>
  <div class="share-sty" :style="{ height: heightVal ? heightVal : '106px' }">
    <div class="list-share" v-for="(item, index) in data" :key="index">
      <div class="top">
        <img :src="item.icon" class="icon-share" alt="">
        <div class="share-name">{{ item.name }}</div>
      </div>
      <div class="share-desc">{{ item.desc }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    heightVal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
}
</script>
<style lang="less" scoped>
.share-sty {
  height: 140px;
  overflow: auto;

  .list-share {
    .top {
      display: flex;
      align-items: center;
      margin-top: 12px;

      .icon-share {
        width: 36px;
        height: 36px;
      }

      .share-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #1E1714;
        line-height: 24px;
      }
    }

    .top:first-child {
      margin-top: 0;
    }

    .share-desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #767B93;
      line-height: 24px;
      margin-top: 8px;
    }
  }
}

.share-sty::-webkit-scrollbar {
  width: 8px;
  /* 设置滚动条的宽度 */
}

.share-sty::-webkit-scrollbar-track {
  background: none;
  /* 设置轨道的背景颜色 */
}

.share-sty::-webkit-scrollbar-thumb {
  background: #E3E5EA;
  /* 设置滑块的背景颜色 */
  border-radius: 24px;
}
</style>
